<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="addHandler">+++</button>
    <p>{{ $store.state.count }}</p>
    <p>{{ count }}</p>
    <p>{{ a }}</p>
    <p>res:{{ res }}</p>
    <p>res:{{ $store.getters.res }}</p>

    <button @click="addHandler2">➕➕➕</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "AboutView",
  data() {
    return {};
  },
  computed: {
    ...mapState(["count", "a"]),
    ...mapGetters(["res"]),
    // aa() {
    //   return 'aa'
    // }
  },
  methods: {
    ...mapMutations(["add1"]),
    ...mapActions(["add2"]),
    addHandler() {
      // this.$store.commit('add1')
      this.add1(5);
    },
    addHandler2() {
      // this.$store.dispatch('add2')
      this.add2();
    },
  },
};
</script>
